<!--督办事件-->
<template>
<div class="page-box">
    <div class="search-box">
        <el-form :inline="true" :model="searchForm" size="medium">
            <el-form-item label="">
                <el-select v-model="searchForm.status" placeholder="督办状态">
					<el-option label="待督办" value="1"></el-option>
					<el-option label="督办中" value="2"></el-option>
					<el-option label="已督办" value="2"></el-option>
					<el-option label="已评价" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary">查询</el-button>
            </el-form-item>
        </el-form>
		<el-button type="primary" size="medium" class="search-right-btn">添加督办</el-button>
    </div>
    <div class="table-box">
        <el-table
            :data="tableData"
            border
            size="medium"
            height="calc(100vh - 315px)"
            style="width: 100%">
            <el-table-column align="center" label="序号" type="index"  width="60"></el-table-column>
			<el-table-column align="center" label="督办编号" prop="number" width="120"></el-table-column>
            <el-table-column align="center" label="督办事件" prop="event" show-overflow-tooltip></el-table-column>
			<el-table-column align="center" label="信息来源" prop="source" width="100"></el-table-column>
            <el-table-column align="center" label="地点" prop="address" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="时间" prop="time" width="160"></el-table-column>
			<el-table-column align="center" label="状态" prop="status" width="120"></el-table-column>
            <el-table-column align="center" label="操作" width="80">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)" v-if="scope.row.status=='未督办'">督办</el-button>
					<el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)" v-if="scope.row.status=='未处理'">处理</el-button>
					<el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)" v-if="scope.row.status=='已处理'">评价</el-button>
                    <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            :current-page="pageNo"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            searchForm:{
                status:''
            },
            tableData:[
				{ number:'2020001', event: '双峰山砂石被开采',source:'微信',address:'双峰山沙A区', time: '2020-09-07 10:20:36', status: '未督办' },
				{ number:'2020002', event: '双峰山砂石被开采',source:'微信',address:'双峰山沙A区', time: '2020-09-07 10:20:36', status: '未处理' },
				{ number:'2020003', event: '孝昌沙河被开采',source:'巡查',address:'孝昌沙河C区', time: '2020-09-08 10:20:36', status: '处理中' },
				{ number:'2020004', event: '城关镇砂石被开采',source:'微信',address:'城关镇沙B区', time: '2020-09-09 10:20:36', status: '已处理' },
				{ number:'2020005', event: '双峰山砂石被开采',source:'巡查',address:'双峰山沙C区', time: '2020-09-10 10:20:36', status: '已评价' }
            ],
            pageSize:10,
            pageNo:1,
            total:16
        }
    },
    created(){},
    methods: {
        // 表格数据操作
        handleEdit(index,val){},
        handleDelete(index,val){
            console.log(val)
            this.$confirm('已选项目【'+val.projectName+'】, 是否删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message.success('删除成功!');
            }).catch(() => {});
        },
        // 分页操作
        handleSizeChange(val){
            this.pageSize=val;
        },
        handleCurrentChange(val){
            this.pageNo=val;
        }
    }
}
</script>
<style lang="scss" scoped>
.page-box{
    height: 100%;
    overflow: hidden;
}
</style>